<template>
  <div class="card flex">
    <div class="card__header flex">
      <span class="card__header__title">{{ props.title }}</span>
      <div class="card__header__right" @click="emits('right')" v-if="rightTitle">
        <span>{{ props.rightTitle }}</span>
        <span class="iconfont icon-youjiantou"></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{ title: string, rightTitle?: string }>()
const emits = defineEmits(["right"])
</script>

<style lang="scss" scoped>
.card {
  padding: 10px 20px;
  flex-direction: column;
  background-color: white;

  &__header {
    justify-content: space-between;
    align-items: center;

    &__title {
      font-size: 20px;
    }

    &__right {
      color: #3F8CFF;
      font-size: 14px;

      &:hover {
        // border-bottom: 1px solid #3F8CFF;
        color: #4b6584;

      }
    }
  }
}
</style>